<template>
  <div class="index-page">

    <xdh-map :zoom="15" :center="mapCenter" type="Amap" ref="testMap"  @ready="mapInit" :layer-config="layerConfig" :min-zoom="15"> 
       <xdh-map-line 
      :routes="routes"
      :arrow="arrow"
      stroke-color="#000" 
      :stroke-width="4">
    </xdh-map-line> 
      
    </xdh-map>
  </div>

</template>

<script>
import {mapState} from 'vuex'
// import macau from '../../public/geo/test.json'
const MAP_SERVER = window.__config__.MAP_HOST
const arrow = require('xdh-map/sources/arrows/black.png') // require('../assets/img/point.png')
export default {
  data() {
    return {
      olMap: null,
      viewer: null,
      state: null, // macau,
      geoState: null,
      layerConfig: {
        Amap: {
          title: '高得地图',
          server: MAP_SERVER
        }
      },
      mapCenter: [113.5472566772461, 22.18401015625],
      routes: [
        [113.5472566772461, 22.18401015625],
        [113.5672566772461, 22.184051015625]
      ],
      arrow: arrow,
      popups: [], 
      areaCount: [], // 
      res: ''
    }
  },
  computed: {
    ...mapState({
      authorKey: 'authorKey'
    })
  },
  watch: {
  },
  methods: {
    
    mapInit(map, vm) {
      this.olMap = map
      this.viewer = this.olMap.getView()
    }
  },
  mounted() {
    // this.fetchGeoJson().then((state) => {
    //   this.state = state
    //   this.fetchMapData()
    // })
   
  }
}
</script>

<style scoped lang="scss">
  .index-page {
    // width: 100%;
    height: 100%;
    background: #f5f5f5;
  }
</style>
